<template>
  <div class="contrain">
    <HeadTitle :left="true"
               :middle="true"
               @back="back">
      <template v-slot:middle>
        <h1>编辑资料</h1>
      </template>
    </HeadTitle>
    <div class="main">
      <el-upload class="avatar-uploader"
                 :action="$upload"
                 :show-file-list="false"
                 :on-success="handleAvatarSuccess">
        <img v-if="userInfo.icon"
             :src="$upload+userInfo.icon"
             class="avatar">
        <img src="../../assets/undefined.jpg"
             v-else>
      </el-upload>
      <span>(点击上传新头像)</span>
      <van-form @failed="onFailed">
        <van-field v-model="userInfo.nickname"
                   label="昵称"
                   required
                   :rules="[{ validator,message:'请输入昵称'}]" />
        <van-field v-model="userInfo.email"
                   label="邮箱"
                   placeholder="请输入邮箱"
                   :rules="[{ validator:Emailvalidator, message:'请输入正确邮箱'}]" />
        <div style="margin: 16px;">
          <van-button round
                      block
                      type="info"
                      @click="submit">提交修改</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import HeadTitle from '_c/utils/HeadTitle'
import { getData } from '@/api/myself'
export default {
  props: ['id'],
  components: { HeadTitle },
  data () {
    return {
      userInfo: {
        icon: '',
        nickname: '',
        email: ''
      }
    }
  },
  methods: {
    fetch () {
      getData(this.id).then(res => {
        this.userInfo = res.data
      }).catch(() => {
        this.$router.push('/myself')
      })
    },
    onFailed () {
      this.$toast.fail('请正确填写所有资料')
    },

    Emailvalidator (val) {
      return val ? /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val) : true
    },
    handleAvatarSuccess (url) {
      this.userInfo.icon = url.filename
    },
    validator (value) {
      return !!value
    },
    submit () {
      this.$store.dispatch('modifyData', this.userInfo).then(() => {
        this.$router.push(window.sessionStorage.getItem('lastpath'))
        this.$toast.success('修改成功')
        this.$router.push('/myself')
      })
    },
    back () {
      this.$router.push('/myself')
    }
  },
  created () {
    this.fetch()
  }

}
</script>
<style lang="less" scoped>
.contrain {
  .main {
    padding: 15px;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    span {
      align-self: center;
      margin: 10px 0;
    }
  }
  .btn {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    p {
      margin-top: 15px;
      align-self: center;
    }
  }
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed black;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%);
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 130px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  line-height: 130px;
  text-align: center;
}
.avatar {
  width: 130px;
  height: 130px;
  display: block;
}
</style >
